<%--
  Created by IntelliJ IDEA.
  User: 94137
  Date: 2018/7/18
  Time: 21:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>开始使用layui</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/layui/css/layui.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/lib/layui/layui.js"></script>
</head>
<body>
<input type="text" id="uname" name="title" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
<button class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal" data-type="queryByUname" id="queryBtn">点击查询</button><br>
<button class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal" data-type="deleteBatch" id="deleteBatchBtn">点击批量删除</button>
<table id="demo" lay-filter="test"></table>
<script>
    layui.use(["table","layer","jquery"],function () {
        var table = layui.table;
        var layer=layui.layer;
        var $=layui.jquery;
        table.render({
            elem: '#demo'
            ,height: 315
            ,url: '${pageContext.request.contextPath}/user/' //数据接口
            ,page: true //开启分页
            ,cols: [[
                {type: 'checkbox'}
                ,{field: 'uid', title: 'ID', width:80, sort: true}

                ,{field: 'uname', title: '用户名', width:80}
                ,{field: 'upwd', title: '密码', width:80, sort: true}
                ,{field: 'uemail', title: '电子邮箱', width:80}
                ,{field: 'utel', title: '电话号码', width: 177}
                ,{field: 'cid', title: '部门编号', width: 177}
                ,{field: 'status', title: '可用状态', width: 177}
                ,{field: 'cname', title: '部门名称', width: 177}
            ]]
            ,done:function (res,curr,count) {
                $("[data-field='status']").children().each(function () {
                    var status=$(this).text();
                    if(status=="1"){
                        $(this).html("可用");
                    }else if(status=="2"){
                        $(this).html("不推荐可使用");
                    }else{
                        $(this).html("不可用");
                    }
                })
            }
        });
        $("#deleteBatchBtn").click(function () {
            var type = $(this).data("type");
            active[type]?active[type].call(this):'';
        });
        $("#queryBtn").click(function () {
            var type = $(this).data("type");
            active[type]?active[type].call(this):'';
        })
        var active={
            deleteBatch:function () {
                var data = table.checkStatus('demo').data;
                if(data.length!=0){
                    var ids = [];
                    for (var i = 0; i < data.length; i++) {
                        ids.push(data[i].uid);
                    }
                    $.ajax({
                        type:"post",
                        url:"${pageContext.request.contextPath}/user/batch",
                        data:{
                            "_method":"DELETE",
                            "ids[]":ids
                        },
                        success:function (deleteFlag) {
                            if(deleteFlag.flag){
                                layer.msg("删除成功!", {icon: 1});
                                location.reload();
                            }else{
                                layer.msg("删除失败!", {icon: 5});
                            }
                        } ,
                        dataType:"json"
                    });
                }else{
                    layer.msg("请至少选中一条!", {icon: 0})
                }
            },
            queryByUname:function () {
                var title = $("#uname").val();
                if($.trim(title).length!=0){
                    table.reload('demo',{
                        page:{curr:1},
                        //第一个title做为表单数据传递出去的key
                        //第二个title就是这里定义js变量
                        where:{title:title}
                    });
                }else{
                    layer.msg("请输入用户名!",{icon:2});
                }
            }
        }
    });
</script>
</body>
</html>